<template>
  <div class="table-component">
    <el-table ref="attributeTable" class="table" :data="controlMode" :row-style="{ height: '60px' }"
      :header-row-style="{ height: '60px' }" style="border-bottom: none; margin-bottom: 0">
      <el-table-column property="mode" label="控制方式" min-width="90" align="center"></el-table-column>
      <el-table-column property="com" label="COM接口" align="center">
        <template #default="scope">
          <el-select v-model="scope.row.com" placeholder="请选择">
            <el-option label="com1" value="com1"></el-option>
            <el-option label="com2" value="com2"></el-option>
            <el-option label="com3" value="com3"></el-option>
            <el-option label="com4" value="com4"></el-option>
            <el-option label="com5" value="com5"></el-option>
            <el-option label="com6" value="com6"></el-option>
            <el-option label="com7" value="com7"></el-option>
            <el-option label="com8" value="com8"></el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column property="baud" label="波特率" align="center">
        <template #default="scope">
          <el-select v-model="scope.row.baud" placeholder="请选择">
            <el-option label="115200" value="115200"></el-option>
            <el-option label="57600" value="57600"></el-option>
            <el-option label="56000" value="56000"></el-option>
            <el-option label="38400" value="38400"></el-option>
            <el-option label="19200" value="19200"></el-option>
            <el-option label="14400" value="14400"></el-option>
            <el-option label="9600" value="9600"></el-option>
            <el-option label="4800" value="4800"></el-option>
            <el-option label="2400" value="2400"></el-option>
            <el-option label="1200" value="1200"></el-option>
            <el-option label="600" value="600"></el-option>
            <el-option label="300" value="300"></el-option>
            <el-option label="110" value="110"></el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column property="data_bit" label="数据位" align="center">
        <template #default="scope">
          <el-select v-model="scope.row.data_bit" placeholder="请选择">
            <el-option label="8" value="8"></el-option>
            <el-option label="7" value="7"></el-option>
            <el-option label="6" value="6"></el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column property="stop_bit" label="停止位" align="center">
        <template #default="scope">
          <el-select v-model="scope.row.stop_bit" placeholder="请选择">
            <el-option label="1" value="1"></el-option>
            <el-option label="2" value="2"></el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column property="check_bit" label="校验位" align="center">
        <template #default="scope">
          <el-select v-model="scope.row.check_bit" placeholder="请选择">
            <el-option label="无" value="none"></el-option>
            <el-option label="奇校验" value="1"></el-option>
            <el-option label="偶校验" value="2"></el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column property="flowctrl" label="flowctrl" align="center">
        <template #default="scope">
          <el-select v-model="scope.row.flowctrl" placeholder="请选择">
            <el-option label="none" value="none"></el-option>
            <el-option label="soft" value="soft"></el-option>
            <el-option label="hard" value="hard"></el-option>
          </el-select>
        </template>
      </el-table-column>
    </el-table>

    <el-table ref="attributeTable" class="table" :data="actions" :row-style="{ height: '60px' }"
      :header-row-style="{ height: '60px' }" style="border-top: none" :height="545">
      <el-table-column type="index" label="功能ID" width="100" align="center"></el-table-column>
      <el-table-column property="name" label="功能名" align="center">
        <template #default="scope">
          <el-input v-model="scope.row.name"></el-input>
        </template>
      </el-table-column>
      <el-table-column property="content" label="内容" align="center">
        <template #default="scope">
          <el-input v-model="scope.row.content"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button type="text" size="medium" :disabled="actions.length === 1" @click="handledelactions(scope.row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-button class="button circle-plus-button" size="medium" icon="el-icon-circle-plus-outline"
      @click="handleAddactions">
      新增
    </el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cid: '',
      controlMode: [],
      actions: [],
      device: {
        // 本地保存的数据
        cid: '',
        controlMode: {},
        actions: [],
      },
    }
  },
  watch: {
    controlMode: {
      handler(newValue, oldValue) {
        // console.log(newValue, oldValue)
        let arr = [
          newValue[0].com,
          newValue[0].baud,
          newValue[0].data_bit,
          newValue[0].stop_bit,
          newValue[0].check_bit,
        ]
        this.device.controlMode = {
          communicationId: this.cid,
          communication: newValue[0].mode,
          param: JSON.stringify(arr),
          flowctrl: newValue[0].flowctrl,
        }
        sessionStorage.setItem('T002', JSON.stringify(this.device))
      },
      deep: true,
      // immediate: true,
    },
    actions: {
      handler(newValue, oldValue) {
        // console.log(newValue, oldValue)
        this.device.actions = newValue.map((element) => {
          let obj = {
            communication: 'RS-485',
            communicationId: this.cid, //通信方式id，与通信方式对应，每个设备内，唯一
            name: element.name,
            action: element.name, //行为名称
            action_code: 'RS-485' + element.name,
            content: element.content,
          }
          return obj
        })
        sessionStorage.setItem('T002', JSON.stringify(this.device))
      },
      deep: true,
      // immediate: true,
    },
  },
  methods: {
    show(id, data) {
      this.cid = id
      this.device.cid = id
      // 是否有回显值
      if (data) {
        // 是否有控制方式
        if (data.config) {
          let config = JSON.parse(data.config)
          config.forEach((element) => {
            if (element.communicationId == id) {
              if (element.param) {
                let arr = JSON.parse(element.param)
                let obj = {
                  mode: element.communication,
                  com: arr[0],
                  baud: arr[1],
                  data_bit: arr[2],
                  stop_bit: arr[3],
                  check_bit: arr[4],
                  flowctrl: element.flowctrl,
                }
                this.controlMode.push(obj)
              }
            }
          })
        }
        if (data.actions) {
          let actions = JSON.parse(data.actions)
          actions.forEach((element) => {
            if (element.communicationId == id) {
              let obj = {
                name: element.name,
                content: element.content,
              }
              this.actions.push(obj)
            }
          })
        }
      }
      // 如果没有默认值
      if (this.controlMode.length < 1) {
        this.controlMode = [
          {
            mode: 'RS-485',
            com: 'com5',
            baud: '115200',
            data_bit: '8',
            stop_bit: '1',
            check_bit: 'none',
            flowctrl: 'none',
          },
        ]
      }
      if (this.actions.length < 1) {
        this.actions = [
          {
            name: '',
            content: '',
          },
        ]
      }
    },
    // 新增功能
    handleAddactions() {
      let obj = {
        name: '',
        content: '',
      }
      this.actions.push(obj)
    },
    // 删除功能
    handledelactions(row) {
      if (this.actions.length > 1) {
        const newArr = this.actions.filter((item) => {
          return item.name != row.name
        })
        this.actions = newArr
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.table {
  width: 100%;
  margin-bottom: 20px;
}

.table-component {
  text-align: center;

  .table {
    border: 1px solid #ebeef5;
    box-sizing: border-box;
  }

  .circle-plus-button {
    width: 100%;
    font-size: 16px;
    line-height: 1.5;
    border-color: transparent;
    margin: 0;
  }
}
</style>
